<template>
	<view class="content">
		<view class="part-a">
			<view class="process-text-part">
				<text class="iconfont icon-process-nengliang" style="font-size: 25px;margin-right:10rpx;"></text>
				<text class="process-text-bold" v-text="todayCalorie"></text>
				<text class="process-text-normal">/400 千卡</text>
			</view>
			<u-line-progress :percentage="(todayCalorie/400*100).toFixed(2)" height="38" activeColor="rgb(252, 97, 38)">
			</u-line-progress>
			<view class="process-text-part">
				<text class="iconfont icon-process-jibu" style="font-size: 25px;margin-right:10rpx;"></text>
				<text class="process-text-bold" v-text="todayStep"></text>
				<text class="process-text-normal">/6000 步</text>
			</view>
			<u-line-progress :percentage="(todayStep/6000*100).toFixed(2)" height="38" activeColor="rgb(253, 189, 36)">
			</u-line-progress>
			<view class="process-text-part">
				<text class="iconfont icon-process-shuimian" style="font-size: 25px;margin-right:10rpx;"></text>
				<text class="process-text-bold" v-text="todaySleep"></text>
				<text class="process-text-normal">/6 小时</text>
			</view>
			<u-line-progress :percentage="(todaySleep*60/(6*60)*100).toFixed(2)" height="38"
				activeColor="rgb(68, 180, 252)">
			</u-line-progress>
		</view>
		<view class="part-b-l" @click="goXueya">
			<view class="iconfont icon-common icon-xueya"></view>
			<u--text size=35 text="血压"></u--text>
			<u--text size=20 text=" "></u--text>
			<view v-if="!xueyaAvaliable" class="empty-chart-view"></view>
			<view v-if="xueyaAvaliable" class="chart-view">
				<qiun-data-charts type="tline" :chartData="xueyaChartData" :opts="xueyaChartOpts" />
			</view>
		</view>
		<view class="part-b-r" @click="goXueyang">
			<view class="iconfont icon-common icon-xueyang"></view>
			<u--text size=35 text="血氧"></u--text>
			<u--text size=20 text=" "></u--text>
			<view v-if="!xueyangAvaliable" class="empty-chart-view"></view>
			<view v-if="xueyangAvaliable" class="chart-view">
				<qiun-data-charts type="tline" :chartData="xueyangChartData" :opts="xueyangChartOpts" />
			</view>
		</view>
		<view class="part-b-l" @click="goXinlv">
			<view class="iconfont icon-common icon-xinlv"></view>
			<u--text size=35 text="心率"></u--text>
			<u--text size=20 text=" "></u--text>
			<view v-if="!xinlvAvaliable" class="empty-chart-view"></view>
			<view v-if="xinlvAvaliable" class="chart-view">
				<qiun-data-charts type="tline" :chartData="xinlvChartData" :opts="xinlvChartOpts" />
			</view>
		</view>
		<view class="part-b-r" @click="goBushu">
			<view class="iconfont icon-common icon-jibu"></view>
			<u--text size=35 text="运动"></u--text>
			<u--text size=20 text=" "></u--text>
			<view v-if="!yundongAvaliable" class="empty-chart-view"></view>
			<view v-if="yundongAvaliable" class="chart-view">
				<qiun-data-charts type="tline" :chartData="yundongChartData" :opts="yundongChartOpts" />
			</view>
		</view>
		<view class="part-b-l" @click="goSleep">
			<view class="iconfont icon-common icon-shuimian"></view>
			<u--text size=35 text="睡眠"></u--text>
			<u--text size=20 text=" "></u--text>
			<view v-if="!shuimianAvaliable" class="empty-chart-view"></view>
			<view v-if="shuimianAvaliable" class="chart-view">
				<qiun-data-charts type="pie" :chartData="shuimianChartData" :opts="shuimianChartOpts"
					:tooltipShow="false" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xueyaAvaliable: false,
				xueyangAvaliable: false,
				xinlvAvaliable: false,
				yundongAvaliable: false,
				shuimianAvaliable: false,
				todayStep: 0,
				todayCalorie: 0,
				todaySleep: 0,
				xueyaChartOpts: {
					dataLabel: false,
					fontSize: '' + this.rpx2px(20),
					fontColor: 'rgb(150,150,150)',
					padding: [20, 15, 0, 15],
					dataPointShape: false,
					color: ['rgb(216, 30, 6)', '#1890FF'],
					extra: {
						tooltip: {
							showBox: false,
							splitLine: false
						}
					},
					xAxis: {
						disableGrid: true,
						min: this.dateUtil.minTimeRange().getTime(),
						max: this.dateUtil.maxTimeRange().getTime(),
						format: "index_time_range"
					},
					yAxis: {
						disableGrid: true,
						data: [{
							disabled: true,
							axisLine: true
						}, {
							disabled: true,
							axisLine: true
						}]
					},
					legend: {
						show: false
					}
				},
				xueyangChartOpts: {
					dataLabel: false,
					fontSize: '' + this.rpx2px(20),
					fontColor: 'rgb(150,150,150)',
					padding: [20, 15, 0, 15],
					dataPointShape: false,
					color: ['rgb(255, 102, 85)'],
					extra: {
						tooltip: {
							showBox: false,
							splitLine: false
						}
					},
					xAxis: {
						disableGrid: true,
						min: this.dateUtil.minTimeRange().getTime(),
						max: this.dateUtil.maxTimeRange().getTime(),
						format: "index_time_range"
					},
					yAxis: {
						disableGrid: true,
						data: [{
							disabled: true,
							axisLine: true,
							min: 85,
							max: 100
						}]
					},
					legend: {
						show: false
					}
				},
				xinlvChartOpts: {
					dataLabel: false,
					fontSize: '' + this.rpx2px(20),
					fontColor: 'rgb(150,150,150)',
					padding: [20, 15, 0, 15],
					dataPointShape: false,
					color: ['rgb(246, 174, 0)'],
					extra: {
						tooltip: {
							showBox: false,
							splitLine: false
						}
					},
					xAxis: {
						disableGrid: true,
						min: this.dateUtil.minTimeRange().getTime(),
						max: this.dateUtil.maxTimeRange().getTime(),
						format: "index_time_range"
					},
					yAxis: {
						disableGrid: true,
						data: [{
							disabled: true,
							axisLine: true
						}]
					},
					legend: {
						show: false
					}
				},
				yundongChartOpts: {
					dataLabel: false,
					fontSize: '' + this.rpx2px(20),
					fontColor: 'rgb(150,150,150)',
					padding: [20, 15, 0, 15],
					dataPointShape: false,
					color: ['rgb(255, 136, 16)'],
					extra: {
						tooltip: {
							showBox: false,
							splitLine: false
						}
					},
					xAxis: {
						disableGrid: true,
						min: this.dateUtil.minTimeRange().getTime(),
						max: this.dateUtil.maxTimeRange().getTime(),
						format: "index_time_range"
					},
					yAxis: {
						disableGrid: true,
						data: [{
							disabled: true,
							axisLine: true,
							max: 10000,
							min: 0
						}]
					},
					legend: {
						show: false
					}
				},
				shuimianChartOpts: {
					color: ["#00AA00", "#00FF7F", "#FFFFFF"],
					dataLabel: false,
					legend: {
						show: false
					},
					extra: {
						pie: {
							border: false,
						}
					}
				},
				xueyaChartData: {},
				xueyangChartData: {},
				xinlvChartData: {},
				yundongChartData: {},
				shuimianChartData: {},
			}
		},
		mounted() {
			let token = uni.getStorageSync('token');
			// console.log(token);
			if (!token) {
				return;
			}
			uni.$u.http.get(`${this.urlConfig.appServerPrefix}/multiclass/multiclasslisthidetoday`, {
				header: {
					"token": token
				}
			}).then(res => {
				// if (res.data.code === 202) {
				// 	uni.showToast({
				// 		title: "请先绑定设备",
				// 		duration: 2000,
				// 		icon: "error",
				// 		complete() {
				// 			setTimeout(function() {
				// 				uni.switchTab({
				// 					url: '/pages/myDevices/myDevices'
				// 				})
				// 			}, 2000)
				// 		}
				// 	})
				// }
				let data = res.data;
				// 血压数据
				let xueyaList = [];
				if(data && data.extend && data.extend.bloodPressureList){
					xueyaList = data.extend.bloodPressureList;
				}
				if (xueyaList && xueyaList.length > 0) {
					this.xueyaAvaliable = true;
				}
				let xueyaTempList_sbp = new Array(xueyaList.length);
				let xueyaTempList_dbp = new Array(xueyaList.length);
				for (let i = 0; i < xueyaList.length; i++) {
					xueyaTempList_sbp[i] = [this.dateUtil.str2date(xueyaList[i].timeBegin).getTime(), xueyaList[i]
						.sbp
					]
					xueyaTempList_dbp[i] = [this.dateUtil.str2date(xueyaList[i].timeBegin).getTime(), xueyaList[i]
						.dbp
					]
				}
				let xueyaChartDataTemp = {
					series: [{
						data: xueyaTempList_sbp
					}, {
						data: xueyaTempList_dbp
					}]
				}
				this.xueyaChartData = JSON.parse(JSON.stringify(xueyaChartDataTemp));

				// 心率数据
				let xinlvList = [];
				if(data && data.extend && data.extend.heartrateList){
					xinlvList = data.extend.heartrateList;
				}
				if (xinlvList && xinlvList.length > 0) {
					this.xinlvAvaliable = true;
				}
				let xinlvTempList = new Array(xinlvList.length)
				for (let i = 0; i < xinlvList.length; i++) {
					xinlvTempList[i] = [this.dateUtil.str2date(xinlvList[i].timeBegin).getTime(), xinlvList[i]
						.heartrate
					]
				}
				let xinlvChartDataTemp = {
					series: [{
						data: xinlvTempList
					}]
				}
				this.xinlvChartData = JSON.parse(JSON.stringify(xinlvChartDataTemp));

				// 血氧数据
				let xueyangList = [];
				if(data && data.extend && data.extend.bloodOxygenList){
					xueyangList = data.extend.bloodOxygenList;
				}
				if (xueyangList && xueyangList.length > 0) {
					this.xueyangAvaliable = true;
				}
				let xueyangTempList = new Array(xueyangList.length)
				for (let i = 0; i < xueyangList.length; i++) {
					xueyangTempList[i] = [this.dateUtil.str2date(xueyangList[i].timeBegin).getTime(), xueyangList[
						i].bloodoxygen]
				}
				let xueyangChartDataTemp = {
					series: [{
						data: xueyangTempList
					}]
				}
				this.xueyangChartData = JSON.parse(JSON.stringify(xueyangChartDataTemp));

				// 运动数据
				let yundongList = [];
				if(data && data.extend && data.extend.stepCountList){
					yundongList = data.extend.stepCountList;
				}
				if (yundongList && yundongList.length > 0) {
					this.yundongAvaliable = true;
				}
				// 最新步数，即最新一条的数据
				if (!yundongList || yundongList.length === 0) {
					this.todayStep = 0;
				} else {
					this.todayStep = yundongList[yundongList.length - 1].value;
					let yundongTempList = new Array(yundongList.length)
					for (let i = 0; i < yundongList.length; i++) {
						yundongTempList[i] = [this.dateUtil.str2date(yundongList[i].timeBegin).getTime(),
							yundongList[i].value
						]
					}
					let yundongChartDataTemp = {
						series: [{
							data: yundongTempList
						}]
					}
					this.yundongChartData = JSON.parse(JSON.stringify(yundongChartDataTemp));
				}
				// 最新步数得到的卡路里
				this.todayCalorie = (this.todayStep * 28 / 1000).toFixed(0);
				// 设置运动表格的最大值
				this.yundongChartOpts.yAxis.data[0].max = this.todayStep

				// 睡眠数据 6小时为标准
				let shuimianList = [];
				if(data && data.extend && data.extend.sleepList){
					shuimianList = data.extend.sleepList;
				}
				if (shuimianList && shuimianList.length > 0) {
					this.shuimianAvaliable = true;
				}
				let deepSleep = 0;
				let lightSleep = 0;
				if (shuimianList && shuimianList.length > 0) {
					deepSleep = shuimianList[0].deepSleep * 1;
					lightSleep = shuimianList[0].lightSleep * 1;
				}
				let awakeTime = 0;
				this.todaySleep = deepSleep + lightSleep;
				if (this.todaySleep < 6) {
					awakeTime = 6 - this.todaySleep
				}
				let shuimianChartDataTemp = {
					series: [{
						data: [{
							"name": "深睡眠",
							"value": deepSleep,
						}, {
							"name": "浅睡眠",
							"value": lightSleep,
						}, {
							"name": "清醒",
							"value": awakeTime,
						}]
					}]
				}
				this.shuimianChartData = JSON.parse(JSON.stringify(shuimianChartDataTemp));
			}).catch(err => {
				console.log(err)
			})
		},
		methods: {
			rpx2px(rpx) {
				return rpx / 750 * uni.getSystemInfoSync().windowWidth
			},
			str2date(str) {
				let hour = str.substr(8, 2);
				let minute = str.substr(10, 2);
				return `${hour}:${minute}`;
			},
			goXueyang() {
				uni.navigateTo({
					url: "/pages/specificData/xueyang/xueyang"
				})
			},
			goXueya() {
				uni.navigateTo({
					url: "/pages/specificData/xueya/xueya"
				})
			},
			goBushu(){
				uni.navigateTo({
					url: "/pages/specificData/bushu/bushu"
				})
			},
			goXinlv() {
				uni.navigateTo({
					url: "/pages/specificData/xinlv/xinlv"
				})
			},
			goSleep() {
				uni.navigateTo({
					url: "/pages/specificData/sleep/sleep"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import url("@/static/fonts/index-iconfont/iconfont.css");

	.content {
		width: 710rpx;
		background-color: #FAFAFA;
		padding: 0 20rpx;
	}

	.part-a {
		border-radius: 30rpx;
		background-color: #FFFFFF;
		padding: 30rpx;
		width: 650rpx;
	}

	.part-b-l,
	.part-b-r {
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 20rpx;
		width: 300rpx;
		margin: 15rpx 0rpx;
		display: inline-block;
		vertical-align: top;
	}

	.part-b-l {
		margin-right: 15rpx;
	}

	.part-b-l {
		margin-left: 15rpx;
	}

	.chart-view {
		width: auto;
		height: 150rpx;
		margin: 10rpx 10rpx 10rpx 0;
		// background-color: rgb(236, 236, 236);
	}

	.empty-chart-view {
		width: auto;
		height: 150rpx;
		margin: 10rpx 10rpx 10rpx 0;
		background-color: rgb(250, 250, 250);
	}

	.process-text-part {
		font-size: 40rpx;
		margin-top: 15rpx;

		.process-text-bold {
			font-weight: bold;
			color: rgb(48, 49, 51);
		}

		.process-text-normal {
			font-weight: normal;
			color: #909399;
		}
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		margin-right: 30rpx;
	}

	.icon-common {
		font-size: 70rpx;
	}

	.icon-jibu:before {
		color: rgb(255, 136, 16);
	}

	.icon-xueyang:before {
		color: rgb(255, 102, 85);
	}

	.icon-shuimian:before {
		color: rgb(150, 157, 230);
	}

	.icon-xinlv:before {
		color: rgb(246, 174, 0);
	}

	.icon-xueya:before {
		color: rgb(216, 30, 6);
	}

	.icon-process-jibu:before {
		color: rgb(253, 189, 36);
	}

	.icon-process-shuimian:before {
		color: rgb(68, 180, 252);
	}

	.icon-process-nengliang:before {
		color: rgb(252, 97, 38);
	}

	.fullfill-bottom {
		height: 50px;
	}
</style>
